<template>
    <div class="sign-content" v-if="data.sign || (data.signs && data.signs.length)">
        <hr>
        <div class="title">
            <i class="fa fa-handshake-o"></i>
            会签意见区
        </div>

        <div style="" class="bg" v-if="data.sign">
            <div class="flx" style="display: none">
                <span>会签选项：</span>
                <div>
                    <label>
                        <input type="radio" name="idea" v-model="sign.idea" value="同意">
                        同意
                    </label>
                    <label>
                        <input type="radio" name="idea" v-model="sign.idea" value="不同意">
                        不同意
                    </label>
                    <label>
                        <input type="radio" name="idea" v-model="sign.idea" value="弃权">
                        弃权
                    </label>
                </div>
            </div>
            <div class="flx">
                <span>会签意见：</span>
                <textarea  class="input-sm" rows="3" v-model="sign.info"></textarea>
            </div>
            <div>
                <ins-annex :deal="true" :files="sign.files"></ins-annex>
            </div>
            <!--<div id="file-app">
                <div style="padding-bottom: 20px;" v-if="sign.files.length">
                    <div v-for="(v,i) in sign.files">
                        {{v.name}}
                        &nbsp;
                        &nbsp;
                        {{v.state}}
                        {{v.percent}}
                        <a href="javascript:;" @click="remove(i)" v-if="!v.creator || v.creator == uid">删除</a>
                        <a
                                :href="getPreviewUrl(v)"
                                v-if="(!v.uploading || v.state == '成功') && canPreview(v.resp ? v.resp.name : v.name)">预览</a>

                        <a :href="'/api/bpm/workflow/download?name=' + (v.resp ? v.resp.name : v.name) + '&path=' + (v.resp ? v.resp.id : v.id)"
                           v-if="!v.uploading || v.state == '成功'">下载</a>
                    </div>
                </div>
            </div>
            <label class="btn btn-warning btn-sm"
                   style="position:relative;overflow: hidden" id="upload">
                <div id="picker" style="width: 1px;height: 1px;position:absolute;left: -100px;top: -100px;">
                </div>
                上传附件
            </label>-->
        </div>


<!--        其余人的意见-->
        <template >
            <div v-for="(item,i) in (data.signs || [])" class="sign-item" >
                <div class="tle">
                    【{{item[0].nodeName || '无节点名'}}】
                </div>

                <div class="cnt">
                    <p v-for="v in item" v-if="!data.sign || data.current.indexOf(v.nodeId) == -1 || v.uid != uid">
                        {{v.created}}
                        【{{v.uname}}】
                        会签意见：{{v.info}}
                        <span style="display: none">会签选项：{{v.idea}}</span>
                        <ins-annex :deal="false" :files="v.files || []"></ins-annex>
                    </p>
                </div>
            </div>
        </template>


        
    </div>
</template>

<script>
    // loadComponent("ins-annex", "./ins.annex.html");

    var uid = $.cookie("userId");
    var component = {
        props:["data"],
        data: function(){
            return {
                sign: {
                    idea: "同意",
                    info: "",
                    /*,
                    files: []*/
                    files: []
                },
                uid: uid
            }
        },
        mounted: function(){
            this.init();
            // this.initUploader();
        },
        methods:{
            remove: function (i) {
                this.files.splice(i);
            },
            init: function () {
                var uid = $.cookie("userId");
                this.uid = uid;
                //我可以签的情况
                var t = this;
                if(this.data.signs && this.data.sign && this.data.current.length) {
                    this.data.signs.forEach(function (g) {
                        g.forEach(function (e) {
                            if(t.data.current.indexOf(e.nodeId) > -1 && t.uid == e.uid){
                                t.sign.idea = e.idea;
                                t.sign.info = e.info;
                                t.sign.files = e.files || [];
                            }
                        })
                    })
                    // this.data.signs.filter(function (e) {
                    //     return t.data.current.indexOf(e.nodeId) > -1 && t.uid == e.uid;
                    // }).forEach(function (e) {
                    //     t.sign.idea = e.idea;
                    //     t.sign.info = e.info;
                    // })
                }
            },
            /**
             * 初始化文件上传
             */
            // initUploader: function () {
            //     var t = this;
            //     //初始化webuploader
            //     var uploader = WebUploader.create({
            //         // swf文件路径
            //         swf: '../lib/web-uploader/Uploader.swf',
            //         // 文件接收服务端。
            //         server: '/api/bpm/workflow/upload',
            //         // 选择文件的按钮。可选。
            //         // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            //         pick: '#picker',
            //         // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            //         resize: false,
            //         auto: true,
            //         duplicate: true,
            //         fileVal: "file"
            //     }).on("uploadStart", function (file) {
            //         console.log("------",file)
            //         file.percent = "0%";
            //         file.state = '上传中';
            //         file.uploading = true;
            //         t.sign.files.push(file);
            //         // console.log(file)
            //     }).on("uploadProgress", function (file, percentage) {
            //         file.percent = (percentage * 100).toFixed(0) + "%";
            //     }).on("uploadSuccess", function (file, response) {
            //         if (response.success) {
            //             file.state = "成功";
            //             file.uploading = false;
            //             file.resp = response.data;
            //         } else {
            //             file.state = "失败";
            //         }
            //     }).on("uploadError", function (file) {
            //         file.state = "失败";
            //     }).on("uploadComplete", function (file) {
            //         file.percent = "";
            //     });
            // },
            // getExt: function(name){
            //     var i = name.lastIndexOf(".");
            //     if(i == -1){
            //         return null;
            //     }
            //     var ext = name.substring(i + 1);
            //     return ext.toLocaleLowerCase();
            // },
            canPreview: function(name){
                var ext = this.getExt(name);
                if({
                    xls:1,
                    xlsx:1,
                    doc:1,
                    docx:1,
                    ppt:1,
                    pptx:1,
                    pdf:1
                }[ext] == 1){
                    return true;
                }
                return false
            },
            getPreviewUrl: function(v){
                var name = v.resp ? v.resp.name : v.name;
                var ext = this.getExt(name);
                if(ext == 'pdf'){
                    return'PageOffice://|http://47.94.97.138/office/PDF.jsp?path=/hz/bpm/uploads' + (v.resp ? v.resp.id : v.id ) + '|left=20px;top=10px;width=800px;height=600px;|' + Math.random() +'|';
                } else {
                    return'PageOffice://|http://47.94.97.138/office/OpenWord.jsp?path=/hz/bpm/uploads' + (v.resp ? v.resp.id : v.id ) + '|left=20px;top=10px;width=800px;height=600px;|' + Math.random() +'|';
                }
            },
        }
    }
</script>

<style>
    .sign-content{
        padding-bottom: 15px;
    }
    .sign-content .upload-btn{
        font-size: 12px;
    }
    .sign-content .flx{
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
    }
    .sign-content label{
        margin-right: 10px;
    }
    .sign-content textarea{
        resize: none;
        flex: 1;
        border: 1px solid #c0d3eb;
        outline: none;
    }
    .sign-content .title{
        color: deepskyblue;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .sign-content .bg{
        background: #f1f8ff;
        border: 1px solid #c0d3eb;
        padding: 8px 15px;
        padding-top: 15px;
        border-radius: 2px;
    }
    .sign-item{
        margin-top: 15px;
        border: 1px solid #c0d3eb;
    }
    .sign-item .tle{
        background: #f1f8ff;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #c0d3eb;
    }
    .sign-item .cnt{
        background: white;
        color: #333;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .sign-item .cnt p{
        font-size: 13px;
    }
</style>